<template>
    <div>
        <div>
           <div class="rankList_title1">
                各级别首次达标记录
            </div>
            <div>
                <el-table
                :data="tableData2"
                border
                style="width: 100%">
                <el-table-column
                prop="a1"
                label="级别">
                </el-table-column>
                <el-table-column
                prop="a2"
                label="会员注册">
                </el-table-column>
                <el-table-column
                prop="a3"
                label="直销员">
                </el-table-column>
                <el-table-column
                prop="a4"
                label="红宝石">
                </el-table-column>
                <el-table-column
                prop="a5"
                label="翡翠">
                </el-table-column>
                <el-table-column
                prop="a6"
                label="钻石">
                </el-table-column>
                <el-table-column
                prop="a7"
                label="金钻">
                </el-table-column>
                <el-table-column
                prop="a8"
                label="双金钻">
                </el-table-column>
                <el-table-column
                prop="a9"
                label="三金钻">
                </el-table-column>
            </el-table>

            </div>
        </div>
        <div>
            <div class="rankList_title2">
                历史级别记录
            </div>
            <div>
                <span class="rankList_year">年份：2018</span>
                <el-button type="text">上一年</el-button>
                <el-button type="text">下一年</el-button>
            </div>
            <el-table
                :data="tableData"
                border
                style="width: 100%">
                <el-table-column
                prop="type"
                label="类别">
                </el-table-column>
                <el-table-column
                prop="one"
                label="三月">
                </el-table-column>
                <el-table-column
                prop="two"
                label="四月">
                </el-table-column>
                <el-table-column
                prop="three"
                label="五月">
                </el-table-column>
                <el-table-column
                prop="four"
                label="六月">
                </el-table-column>
                <el-table-column
                prop="five"
                label="七月">
                </el-table-column>
                <el-table-column
                prop="six"
                label="八月">
                </el-table-column>
                <el-table-column
                prop="seven"
                label="九月">
                </el-table-column>
                <el-table-column
                prop="eight"
                label="十月">
                </el-table-column>
                <el-table-column
                prop="nine"
                label="十一月">
                </el-table-column>
                <el-table-column
                prop="ten"
                label="十二月">
                </el-table-column>
                <el-table-column
                prop="eleven"
                label="一月">
                </el-table-column>
                <el-table-column
                prop="twelve"
                label="二月">
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return {
            tableData:[
                {
                    type:"奖金级别",
                    one:"6",
                    two:"6",
                    three:"6",
                    four:"7",
                    five:"7",
                    six:"7",
                    seven:"7",
                    eight:"7",
                    nine:"7",
                    ten:"7",
                    eleven:"7",
                    twelve:"7",
                },
                {
                    type:"奖衔级别",
                    one:"4",
                    two:"5",
                    three:"6",
                    four:"7",
                    five:"6",
                    six:"5",
                    seven:"7",
                    eight:"4",
                    nine:"5",
                    ten:"6",
                    eleven:"7",
                    twelve:"8",
                },
            ],
            tableData2:[
                {
                    a1:"时间",
                    a2:"2010年3月",
                    a3:"2010年7月",
                    a4:"2011年3月",
                    a5:"2012年5月",
                    a6:"2013年1月",
                    a7:"2014年10月",
                    a8:"2015年3月",
                    a9:"2016年3月",
                }
            ]
        }
    }
}
</script>
<style>
.rankList_title1,.rankList_title2{
    font-size: 18px;
    font-weight: bold;
}
.rankList_title1{
    margin-bottom: 10px;
}
.rankList_title2{
    margin-top: 30px;
}
.rankList_year{
    display: inline-block;
    margin-right:30px;
    margin-left:5px;
}
</style>


